<template>
  <el-form>
    <el-button type="success" icon="el-icon-edit" style="float:right;margin: 20px 0;" @click="createDialog=true">新增用户</el-button>
    <el-alert
      :title="`共${total}条记录`"
      type="info"
      show-icon
      :closable="false"
      style="margin:20px 0"
    />
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
    >
      <el-table-column

        label="序号"
        width="100"
        type="index"
      />
      <el-table-column
        prop="number"
        label="企业编号"
        width="180"
      />
      <el-table-column
        prop="company"
        label="企业简称"
        width="100"
      />
      <el-table-column
        prop="tags"
        label="标签"
      />
      <el-table-column
        prop="creatorID"
        label="创建者"
      />
      <el-table-column
        prop="addDate"
        label="创建日期"
      />
      <el-table-column
        prop="remarks"
        label="备注"
      />
      <el-table-column
        prop="state"
        label="状态"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button

            type="primary"
            icon="el-icon-edit"
            circle
            @click="handleEdit(scope.row)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增弹框的显示 -->
    <el-dialog
      title="创建用户"
      :visible.sync="createDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="formData">
        <el-form-item label="企业名称">
          <el-input v-model="formData.shortName" />
        </el-form-item>
        <el-form-item label="所属公司">
          <el-input v-model="formData.company" />
          <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
        </el-form-item>
        <el-form-item label="城市地区">
          <el-select v-model="province" style="width:40%" placeholder="请选择">
            <el-option v-for="item in citys " :key="item.id" :label="item.city" :value="item.name" />
          </el-select>
          <el-select v-model="formData.city" style="width:40%" placeholder="请选择">
            <el-option v-for="(item,key) in areaArr" :key="key" :label="item" :value="item" />
          </el-select>

        </el-form-item>
        <el-form-item label="方向（企业标签）">
          <el-input v-model="formData.tags" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.remarks" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <!-- footer插槽 -->
      <template v-slot:footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleAdd">确定添加</el-button>

      </template>
      <!--  -->
    </el-dialog>
    <!-- 编辑弹框的显示 -->
    <el-dialog
      title="编辑用户"
      :visible.sync="editDialog"
      width="30%"
      @close="editDialog=false"
    >
      <el-form :model="formData">
        <el-form-item label="企业名称">
          <el-input v-model="formData.shortName" />
        </el-form-item>
        <el-form-item label="所属公司">
          <el-input v-model="formData.company" />
          <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
        </el-form-item>
        <el-form-item label="城市地区">
          <el-select v-model="province" style="width:40%" placeholder="请选择">
            <el-option v-for="item in citys " :key="item.id" :label="item.city" :value="item.name" />
          </el-select>
          <el-select v-model="formData.city" style="width:40%" placeholder="请选择">
            <el-option v-for="(item,key) in areaArr" :key="key" :label="item" :value="item" />
          </el-select>

        </el-form-item>
        <el-form-item label="方向（企业标签）">
          <el-input v-model="formData.tags" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.remarks" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <!-- footer插槽 -->
      <template v-slot:footer>
        <el-button @click="editDialog=false">取消</el-button>

        <el-button type="primary" @click="send">确定修改</el-button>
      </template>
      <!--  -->
    </el-dialog>
  </el-form>

</template>

<script>
import { companyListAPI, delCompany, addCompany, getDetailAPI, editDetail } from '@/api/company'
import { City, JN, LC, WH, ZB } from '@/utils/city'
export default {
  name: 'Company',
  data() {
    return {
      citys: City,
      selectCitys: '',
      province: '',
      areaArr: null,
      isOpen: true,
      // 添加弹框
      createDialog: false,
      // 修改弹框
      editDialog: false,
      // 获取列表数据
      tableData: [],
      total: '',
      // 收集表单数据
      formData: {
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
        isFamous: true,
        id: '',
        number: '',
        addDate: '',
        creatorID: ''

      },
      //
      provinceList: [],
      cityList: []

    }
  },
  watch: {
    province(newval) {
      // eslint-disable-next-line no-return-assign
      if (this.isOpen) { return this.isOpen = false }
      const obj = {
        'JN': JN,
        'LC': LC,
        'ZB': ZB,
        'WH': WH
      }
      this.areaArr = obj[newval]
      this.formData.province = /^[A-Z]{2}$/.test(newval) && this.citys.find(item => item.name === newval).city
    }
  },
  created() {
    this.companyList()
  },
  methods: {
    open() {
      this.province = this.formData.province
    },
    handleClose() {
      this.createDialog = false
    },

    async companyList() {
      const resp = await companyListAPI()
      console.log(resp)
      this.total = resp.counts
      this.tableData = resp.items
      this.provinceList = resp.items
      this.cityList = resp.items
    },
    // 删除企业信息
    async handleDelete(row) {
      await delCompany(row.id)
      this.$message.success('删除成功')
      this.companyList()
    },
    // 添加企业信息
    async handleAdd() {
      try {
        await addCompany(this.formData)
        this.$message.success('添加成功')
        this.companyList()
        this.handleClose()
      } catch (error) {
        console.log(error)
      }
    },
    // 点击编辑企业信息
    async handleEdit(row) {
      this.editDialog = true
      const resp = await getDetailAPI(row.id)
      console.log(resp)
      this.formData = resp
    },
    // 确定修改
    async send() {
      // 把表单收集的0，1转换为后台需要的true，false
      this.formData.isFamous = !!this.formData.isFamous
      await editDetail(this.formData)
      this.editDialog = false
      this.$message.success('修改成功')
      this.companyList()
    }
  }
}
</script>
